<template>
  <el-select
    v-model="id"
    size="small"
    :remote-method="selAll"
    remote
    filterable
    style="width: 100%"
    placeholder="请选择车辆"
    clearable
    @focus="selAll"
  >
    <el-option
      v-for="item in list"
      :key="item.id"
      :label="item.plate_num"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import { selCarts, queryCart } from '@/api/cart'

export default {
  name: 'StaffSelect',
  props: {
    value: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      list: [],
      id: null
    }
  },
  watch: {
    'value': {
      handler(n, o) {
        if (n !== null && n !== '') {
          this.$set(this, 'id', this.value)
          this.selOne()
        } else {
          this.$set(this, 'id', '')
        }
      },
      deep: true,
      immediate: true
    },
    'id': {
      handler(n, o) {
        this.$emit('input', this.id)
      },
      immediate: false
    }
  },
  created() {
  },
  methods: {
    selAll(query) {
      let str = ''
      if (Object.prototype.toString.call(query) === '[object String]') str = query
      selCarts({ name: str }).then(response => {
        this.list = response.list
      }).catch(err => {
        this.$message.error(err.msg || '请求失败')
      })
    },
    selOne() {
      this.$set(this, 'list', [])
      queryCart({ id: this.value }).then(response => {
        const info = {}
        info.id = response.info.id
        info.plate_num = response.info.plate_num
        this.list.push(info)
      }).catch(err => {
        this.$message.error(err.msg || '请求失败')
      })
    }
  }
}
</script>

<style scoped>
</style>
